<template>
	<view class="content">
		<view class="top-swiper">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item v-for="(item,index) in swiperImgList" :key="index">
					<view class="swiper-item uni-primary-bg" style="height: 150px;">
						<image :src="$currectUrl(item)" style="width: 100%;height: 100%;" mode="scaleToFill"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="top-nav">
			<view class="top-nav-item" v-for="(item,index) in topNavList" @click="handleTopNavClick(item)" :key="index">
				<view class="top-nav-item-icon">
					<image :src="$currectUrl(item.icon)" class="nav-icon" mode="widthFix"></image>
				</view>
				<view class="top-nav-item-title">{{item.name}}</view>
			</view>
		</view>
		<view>
			<navigator url="/pages/test-web-view">打开webview</navigator>
			<button type="default" @click="webviewClick">打开webview</button>
		</view>
		<view class="user-top-nav1">
			<view style="background: repeating-linear-gradient(45deg,#ffe199,#ff941a);display: flex;"
				@click="handleClickTopNav('favorite')">
				<view class="bg2">

				</view>
				<image src="@/static/images/techer.png" mode="widthFix" style="width: 50px;"></image>
				<view style="margin: 5px 0 0 10px;line-height: 1.5;text-align: center;">
					<view style="color: #ffffff;">我的收藏</view>
					<view style="color: #ffffff;font-size: .7em;">我收藏的应用</view>
				</view>

			</view>

			<view style="background: repeating-linear-gradient(45deg,#a6f7ff,#21d7ff);display: flex;"
				@click="handleClickTopNav('bszn')">
				<view class="bg2">

				</view>
				<image src="@/static/images/person2.png" mode="widthFix" style="width: 50px;"></image>
				<view style="margin: 5px 0 0 10px;line-height: 1.5;text-align: center;">
					<view style="color: #ffffff;">办事指南</view>
					<view style="color: #ffffff;font-size: .7em;">办事指南汇总</view>
				</view>
			</view>
		</view>
		<view class="article-list-nav">
			<view :class="{'active':index===currentArticleNav}" v-for="(item,index) in newsCategoryList" :key="index"
				@click="handleArticleNavClick(index)">
				{{item.cateName}}
			</view>
		</view>
		<view class="article-list">
			<view v-for="(item,index) in newsCategoryList">
				<view v-if="index===currentArticleNav">
					<my-list-item  v-for="(item,index) in articleList[currentArticleNav]" :artilce="item" :key="index" class="article-list-item" @click="handleArticleClick(item)" />
				</view>
			</view>
		</view>
		<uni-drawer ref="myDrawer" mode="left" :width="220" :mask-click="true">
			<view style="padding:30rpx;">
				<uni-list>
					<uni-list-item title="关于我们" note=""></uni-list-item>
					<uni-list-item title="联系我们" note=""></uni-list-item>
				</uni-list>
				<button type="primary" @click="showDrawer(false)">关闭</button>
			</view>
		</uni-drawer>
	</view>
</template>

<script>
	import { listNav } from '../../common/js/api/nav'
import { listNews } from '../../common/js/api/news'
import { listCategory } from '../../common/js/api/newsCategory'
import { listSwiperImg } from '../../common/js/api/public'
	export default {
		data() {
			return {
				currentArticleNav: 0,
				newsCategoryList:[],
				articleList:[],
				isShowDrawer: false,
				swiperImgList: [],
				topNavList: []
			}
		},
		onNavigationBarButtonTap(val) {
			this.showDrawer()
		},
		onLoad() {
			// 获取顶部幻灯片
			listNews({pageNum:1,pageSize:4,category:1}).then(res=>{
				if(res.data.list && res.data.list.length > 0) {
					res.data.list.forEach(item=>{
						this.swiperImgList.push(item.thumb)
					})
				}
			})
			// 获取导航菜单
			listNav({pageNum:1,pageSize:4}).then(res=>{
				// console.log(res);
				this.topNavList = res.data.list.map(item=>{
					return {
						name:item.name,
						icon:item.icon
					}
				})
			})
			
			// 获取新闻分类
			listCategory({pid:2}).then(res=>{
				this.newsCategoryList = res.data.list
				this.articleList = res.data.list.map(item=>{
					return []
				})
				if(this.newsCategoryList.length>0) {
					this.getNewsListByCategoryId(0)
				}
			})
		},
		methods: {
			webviewClick(){
				uni.navigateTo({
					url:'/pages/test-web-view'
				})
			},
			// 获取新闻列表
			getNewsListByCategoryId(currentCategoryIndex){
				if(!this.articleList[currentCategoryIndex].length){
					listNews({categoryId:this.newsCategoryList[currentCategoryIndex].id}).then(res=>{
						console.log(res);						
						this.articleList[currentCategoryIndex] = res.data.list
						console.log(this.articleList);
					}).catch(err=>{
						console.error(err);
					})
				}
			},
			handleArticleClick(item){
				uni.navigateTo({
					url:"/pages/article/show?id="+item.id+"&title="+item.title,
				})
			},
			handleArticleNavClick(index) {
				this.currentArticleNav = index
				this.getNewsListByCategoryId(index)
			},
			handleClickTopNav(urlName) {
				uni.navigateTo({
					url: "/pages/user/" + urlName
				})
			},
			showDrawer(open = true) {
				if (open) {
					this.$refs.myDrawer.open()
					return
				}
				this.$refs.myDrawer.close()

			},
			handleTopNavClick(item){
				uni.navigateTo({
					url:"/pages/article/simple-list"
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.content{
		padding-bottom: 60px;
	}
	.top-swiper {
		width: 100%;
	}

	.top-nav {
		width: 100%;
		height: 80px;
		display: flex;
		justify-content: space-around;

		.top-nav-item {
			padding: 10px;
			flex: 0 0 20%;
			height: 80px;
			text-align: center;

			.top-nav-item-icon {
				display: flex;
				justify-content: center;
				.nav-icon{
					width: 50%;
					margin-bottom: 10px;
				}
			}

			.top-nav-item-title {
				font-size: 1em;
				color: #646464;
			}
		}
	}

	.user-top-nav1 {

		padding: 0 16px;
		margin-top: 10px;
		z-index: 2;
		display: flex;
		justify-content: space-between;


	}

	.user-top-nav1>view {
		overflow: hidden;
		position: relative;
		height: 60px;
		width: calc(50% - 25px);
		border-radius: 10px;
		z-index: 10;
		padding: 10px;

		.bg2 {
			width: 90px;
			height: 90px;
			background: #ffffff;
			position: absolute;
			border-radius: 50%;
			top: -30px;
			right: -10px;
			opacity: .2;
		}
	}
</style>